'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href='/'>
            Home
          </Link>
        </li>
        <li>
          <Link
            className={`link ${
              pathname === '/routing/link_navigating' ? 'active' : ''
            }`}
            href='/routing/link_navigating'
          >
            routing/link_navigating
          </Link>
        </li>
      </ul>
    </nav>
  )
}
